<template>
	<div style="width:700px;height: 1000px; margin: 0px auto;">
		<div id="HotEvent">
			<p style="font-size: 1.5em;">{{HotEvents.keyWord}}</p>
			<p>创建于：{{HotEvents.createDate}}</p>
			<p>{{HotEvents.hotContent}}</p>
		</div>
		<div id="Comments">
			<p style="font-size: 1.5em;">评论</p>
			<div v-for="item in Comments" style="background-color: #000f0f;color: white;">
				<p>评论时间：{{item.commentDate}}</p>
				<p>{{item.content}}</p>
			</div>
		</div>
		<div id="addComment">
			快速评论：<br/>
			<textarea v-model="content"></textarea><br/>
			<button @click="addComment()" style="margin-right: 50px;">提交</button><a href="javascript:void(0);" @click="jump()">返回首页</a>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default{
		data(){
			return{
				id:this.$route.query.id,
				content:"",
				HotEvents:[],
				Comments:[]
			}
		},
		beforeMount() {
			var that=this;
			var url="http://localhost:8081/getHotEventInfo";
			axios.get(url,{
				params:{
					id:that.id
				}
			}).then(res=>{
				console.log(res);
				if(res.data.message=="OK"){
					that.HotEvents=res.data.data;
				}
			})
		},
		mounted() {
			var that=this;
			var url="http://localhost:8081/getComments";
			axios.get(url,{
				params:{
					id:that.id
				}
			}).then(res=>{
				console.log(res);
				if(res.data.message=="OK"){
					that.Comments=res.data.data;
				}
			})
		},
		methods:{
			addComment:function(){
				var that=this;
				var url="http://localhost:8081/addComment";
				axios.get(url,{
					params:{
						id:that.id,
						content:that.content
					}
				}).then(res=>{
					console.log(res);
					if(res.data.message=="OK"){
						alert("评论成功");
						this.$router.push("/home");
					}else{
						alert("评论失败")
						this.$router.push("/home");
					}
				})
			},
			jump:function(){
				this.$router.push("/home");
			}
		}
	}
</script>

<style>
</style>
